<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2022/2/23
  Time: 13:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>Title</title>
    <!--引入EasyUI的资源-->
    <link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/themes/color.css">
    <link rel="stylesheet" type="text/css" href="static/themes/demo.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
    /*******************初始化加载新人信息的DataGrid***************************/
    $(function (){
        //初始化DataGrid
        $("#marriedDataGrid").datagrid({
            url:"marriedPerson/marryInfo",//设置远程加载数据的地址
            pagination:true,//在表格中显示分页工具栏，只有将属性值设置为true，就会发起Ajax分页请求获取要加载的数据
            rownumbers:true,//显示行号
            pageNumber:1,//设置Ajax分页默认页码
            pageSize:2,//设置每页显示的数量
            pageList:[2,4,6],//设置每页数据量下拉框框中的数量
            // title:"查询结果",//显示标题
            columns:[[//设置表格的列以及每列和加载的数据的映射关系
                {title:"编号",field:"pid",width:100},
                {title:"姓名",field:"pname",width:100},
                {title:"手机号",field:"phone"},
                {title:"注册时间",field:"regdate",
                    formatter:function (value,rows,rowIndex) {
                        return value.year+"-"+value.monthValue+"-"+value.dayOfMonth+" "+value.hour+":"+value.minute+":"+value.second
                    }
                },
                {title:"账号状态",field:"status",width:100,
                    formatter:function (value, rows, rowIndex) {
                        return value=="1"?"正常":"禁用";
                    }
                }
            ]]
        })
    })
    /**********************查询按钮完成新人信息的筛选分页查询**************************/
    $(function () {
        //给查询按钮增加单机事件
        $("#search").click(function () {
            //dataGrid按照条件重新分页加载主持人信息
            $("#marriedDataGrid").datagrid('load',{
                pname:$("#pname").val(),
                phone:$("#phone").val()
            })
        })
    })
    </script>
</head>
<body>
    <!--创建主持人面板组件-->
    <div id="p" class="easyui-panel" title="新人管理"
         style="width:800px;height:500px;padding:10px;background:#fafafa;"
         data-options="iconCls:'icon-save',closable:false,
             collapsible:false,minimizable:false,maximizable:false">
            <!--创建检索条件-->
            <div style="margin: auto;width: 700px;text-align: center">
                <!--创建检索条件表单-->
                <form action="">
                    <input class="easyui-textbox" prompt="新人姓名" id="pname" name="pname" style="width:120px"><!--姓名条件-->
                    <input class="easyui-textbox" prompt="新人手机号" id="phone" name="phone" style="width:120px"><!--姓名条件-->
                    <a id="search" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:false">查询</a>
                </form>

            </div>
            <!--创建主持人信息加载的DataGrid组件-->
            <table id="marriedDataGrid" style="width: 600px;margin-left: 100px"></table>
    </div>
</body>
</html>
